<template>
  <div class="cinema-list-tag">
    <div
      v-for="(item, index) in cinemaListTag"
      :key="index"
      :class="{ active: index === currentIndex }"
      @click="listTagClick(index)"
    >
      <p>{{ item }}</p>
      <span :class="index === currentIndex ? 'icon-jiantoushang' : 'icon-iconfontjiantou'" class="iconfont"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CinemaListTag',
  props: ['cinemaListTag'],
  data() {
    return {
      currentIndex: -1
    }
  },
  methods: {
    listTagClick(index) {
      if (this.currentIndex === index) {
        this.currentIndex = -1
      } else {
        this.currentIndex = index
      }
      this.$emit('listTagClick', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-list-tag {
  height: 0.49rem;
  background: white;
  display: flex;
  border-bottom: 0.5px solid #eee;
  div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 10px;
      padding-left: 0.05rem;
    }
  }
}
.active {
  color: #ff5f16;
}
</style>